<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商家登录</title>
</head>
<style>
    html, body {
        width: 100%;
        min-height: 100%;
        margin: 0;
        padding: 0;
    }

    .loginPanel {
        margin-top: calc(50vh - 100px);
        margin-left: calc(50vw - 150px);
        width: 300px;
        height: 100px;
    }

</style>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="/js/lib/jsencrypt.min.js"></script>
<script type="text/javascript" src="/js/lib/RSAUtil.js"></script>
<script type="text/javascript">
    $(function () {
        //监听回车按钮登录
        $("body").bind('keydown', function (event) {
            if (event.keyCode == 13) {
                getNonceStrAndLogin();
            }
        });

        //绑定登录按钮
        $("#popLogin").bind("click", getNonceStrAndLogin);

    });

    //登录方法
    function login(nonceStr) {
        var params = {
            username: $("#username").val(),
            token: encryptRequest($("#password").val() + nonceStr, DEFAULT_RSA_PUBLIC_KEY),
            pop: true
        };
        $.ajax({
            url: "login/doLogin",
            dataType: "json",
            data: JSON.stringify(params),
            type: "post",
            contentType: "application/json;charset=UTF-8",
            timeout: 10000,
            success: function (json) {
                if (json.code == 0) {
                    window.location.href = "/index.html";
                } else {
                    $("#msg").html("<span style='color: red'>" + json.msg + "</span>");
                }
            },
        });
    }
    function getNonceStrAndLogin() {
        $.ajax({
            url: "login/generateNonceStr",
            dataType: "json",
            data: {},
            type: "get",
            timeout: 10000,
            success: function (json) {
                if (json.code == 0) {
                    login(json.resultBody.body);
                } else {
                    $("#msg").html("<span style='color: red'>服务器异常</span>");
                }
            },
        });
    }

    function checkNull(obj, msg) {
        var $obj = $(obj);
        var val = $obj.val();
        if (val == "") {
            $("#msg").html("<span style='color: red'>" + msg + "</span>");
        } else {
            $("#msg").html("");
        }
    }

</script>
<body style="text-align: center;background: url('img/bg.jpg');background-position:100% 100%; background-repeat:no-repeat;">
<div style="width: 100%;height: 100%;text-align: center;">
    <div class="loginPanel">
        <div id="msg" style="margin-bottom: 10px"></div>
        <div class="input-group mb-3 ">
            <div class="input-group-prepend">
                <label class="input-group-text" style="width: 80px;text-align: center;">用户名</label>
            </div>
            <input id="username" type="text" onblur="checkNull(this,'用户名不能为空')" class="form-control error"
                   placeholder="Username" name="username">
        </div>

        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text " style="width: 80px">密&nbsp;&nbsp;&nbsp;&nbsp;码</label>
            </div>
            <input id="password" type="password" onblur="checkNull(this,'密码不能为空')" class="form-control"
                   placeholder="Password" name="password">
        </div>
        <input id="popLogin" class="btn btn-primary" style="width: 300px" type="button"
               value="登&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;录"/>
    </div>
</div>
</body>
</html>